<script setup lang="ts">
import { useStore } from '@/store/index';
import { onMounted, ref, watch } from 'vue';
const { router, route, pushStack } = useAppRouter()
const { user } = useStore()

const active = ref()

const tabs = ref([
  {
    label: '比赛',
    icon: 'home',
    name: '/layout/home'
  },
  {
    label: '认证',
    icon: 'account-circle',
    name: '/layout/profile'
  },
  // {
  //   label: 'TOPIC',
  //   icon: 'heart',
  //   name: '/layout/topic'
  // },
  // {
  //   label: 'MESSAGE',
  //   icon: 'border-radius',
  //   namespace: 'i',
  //   name: '/layout/message'
  // },

])

watch(
  () => route.path,
  (newValue) => {
    active.value = newValue
  },
  { immediate: true }
)

function to(path: string) {
  router.replace(path)
}


// 个人信息
async function fetchStudentData() {
  try {
    user.getInfo()
  } catch (err) {
    console.error("fetchStudentData err=>", err)
  }
}

onMounted(() => {
  fetchStudentData()
})

</script>

<template>
  <div class="h-[var(--app-height)] pb-[51px] overflow-y-auto">
    <router-view v-slot="{ Component, props }">
      <!-- <keep-alive> -->
      <component :is="Component" v-bind="props" :student="user.info" :person="fetchStudentData" />
      <!-- </keep-alive> -->
    </router-view>

    <var-bottom-navigation safe-area fixed v-model:active="active">
      <var-bottom-navigation-item v-for="item in tabs" :key="item.label" :label="item.label" :icon="item.icon"
        :name="item.name" :namespace="item.namespace" @click="() => to(item.name)" />
    </var-bottom-navigation>
  </div>
</template>
